<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    sort-by="calories"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar
        flat
      >
        <v-toolbar-title>大乐透统计</v-toolbar-title>
        <v-divider
          class="mx-4"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <v-dialog
          v-model="dialog"
          max-width="500px"
        >
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="primary"
              dark
              class="mb-2"
              v-bind="attrs"
              v-on="on"
            >
              新的期数
            </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                  <v-col
                    cols="12"
                    sm="6"
                    md="4"
                  >
                    <v-text-field
                      v-model="editedItem.name"
                      label="Dessert name"
                    ></v-text-field>
                  </v-col>
                  <v-col
                    cols="12"
                    sm="6"
                    md="4"
                  >
                    <v-text-field
                      v-model="editedItem.calories"
                      label="Calories"
                    ></v-text-field>
                  </v-col>
                  <v-col
                    cols="12"
                    sm="6"
                    md="4"
                  >
                    <v-text-field
                      v-model="editedItem.fat"
                      label="Fat (g)"
                    ></v-text-field>
                  </v-col>
                  <v-col
                    cols="12"
                    sm="6"
                    md="4"
                  >
                    <v-text-field
                      v-model="editedItem.carbs"
                      label="Carbs (g)"
                    ></v-text-field>
                  </v-col>
                  <v-col
                    cols="12"
                    sm="6"
                    md="4"
                  >
                    <v-text-field
                      v-model="editedItem.protein"
                      label="Protein (g)"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                color="blue darken-1"
                text
                @click="close"
              >
                Cancel
              </v-btn>
              <v-btn
                color="blue darken-1"
                text
                @click="save"
              >
                Save
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-dialog v-model="dialogDelete" max-width="500px">
          <v-card>
            <v-card-title class="headline">您当前不是付费会员，无法操作，是否充值？</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="closeDelete">取消</v-btn>
              <v-btn color="blue darken-1" text @click="deleteItemConfirm">确定</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>

<!-- 添加彩票弹窗 -->

 <v-row justify="center">
    <v-dialog
      v-model="lettoDialog"
      persistent
      max-width="700px"
    >


 <v-card>
        <v-card-title>
          <span class="headline">添加彩票</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              
           
             <v-col>
                 <v-btn-toggle
          v-model="frontNumList"
          multiple
@change="writeNum"
         
        >
        <v-container>
      <v-row  no-gutters>
<v-col>
<v-btn>
           01
          </v-btn>
        <v-btn>
           02
          </v-btn>
<v-btn>
           03
          </v-btn>
          <v-btn>
           04
          </v-btn>
          <v-btn>
           05
          </v-btn>
          <v-btn>
           06
          </v-btn>
        <v-btn>
           07
          </v-btn>
<v-btn>
           08
          </v-btn>
          <v-btn>
           09
          </v-btn>
          <v-btn>
           10
          </v-btn>
         
</v-col>
     
      
      </v-row>
          <v-row  no-gutters>
<v-col>

            <v-btn>
           11
          </v-btn>
            <v-btn>
           12
          </v-btn>
        <v-btn>
           13
          </v-btn>
          <v-btn>
           14
          </v-btn>
          <v-btn>
           15
          </v-btn>
          <v-btn>
           16
          </v-btn>
        <v-btn>
          17
          </v-btn>
          <v-btn>
           18
          </v-btn>
          <v-btn>
           19
          </v-btn>
          <v-btn>
           20
          </v-btn>
</v-col>
     
      
      </v-row>
         <v-row  no-gutters>
<v-col>
<v-btn>
           21
          </v-btn>
        <v-btn>
           22
          </v-btn>
<v-btn>
           23
          </v-btn>
          <v-btn>
           24
          </v-btn>
          <v-btn>
           25
          </v-btn>
          <v-btn>
           26
          </v-btn>
        <v-btn>
           27
          </v-btn>
<v-btn>
           28
          </v-btn>
          <v-btn>
           29
          </v-btn>
          <v-btn>
           30
          </v-btn>
</v-col>
     
      
      </v-row>
         <v-row  no-gutters>
<v-col>
<v-btn>
           31
          </v-btn>
        <v-btn>
           32
          </v-btn>
        <v-btn>
           33
          </v-btn>
          <v-btn>
           34
          </v-btn>
          <v-btn>
           35
          </v-btn>
         
</v-col>
     
      
      </v-row>
        </v-container>
        
                 </v-btn-toggle>
             </v-col>
             
               
            </v-row>
            <v-row>
<v-col>

      <v-btn-toggle
          v-model="endNumList"
          multiple
@change="writeNum"
         
        >
        <v-container>
      <v-row  no-gutters>
<v-col>
<v-btn>
           1
          </v-btn>
        <v-btn>
           2
          </v-btn>
<v-btn>
           3
          </v-btn>
          <v-btn>
           4
          </v-btn>
          <v-btn>
           5
          </v-btn>
          <v-btn>
           6
          </v-btn>
        <v-btn>
           7
          </v-btn>
<v-btn>
           8
          </v-btn>
          <v-btn>
           9
          </v-btn>
          <v-btn>
           10
          </v-btn>
</v-col>
     
      
      </v-row>
          <v-row  no-gutters>
<v-col>
<v-btn>
           11
          </v-btn>
        <v-btn>
           12
          </v-btn>

</v-col>
     
      
      </v-row>
  
        
        </v-container>
        
                 </v-btn-toggle>
</v-col>

            </v-row>
          </v-container>
          <small>您的前区号码为：{{userfrontNumList}}</small><br>
          <small>您的前区号码为：{{userendNumList}}</small><br>
          <!-- <small>总金额为：</small><br> -->
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="blue darken-1"
            text
            @click="lettoDialog = false"
          >
            关闭
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="pushLottery"
          >
            提交
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>






















































      </v-toolbar>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-pencil
      </v-icon>
        <v-icon
        small
        class="mr-2"
        @click="checkDetail(item)"
      >
        mdi-binoculars
      </v-icon>
        <v-icon
        small
        class="mr-2"
        @click="addLetto(item)"
      >
       mdi-database-plus
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        mdi-delete
      </v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn
        color="primary"
        @click="initialize"
      >
        Reset
      </v-btn>
    </template>
  </v-data-table>
</template>
<script>
  export default {
    data: () => ({
      dialog: false,
      dialogDelete: false,
      //大乐透单张弹窗
      lettoDialog:false,
      headers: [
        {
          text: '大乐透期数',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: '复式（张）', value: 'calories' },
        { text: '参与人数（人）', value: 'fat' },
        { text: '总金额（元）', value: 'carbs' },
        { text: '总注数（注）', value: 'protein' },
        { text: '操作', value: 'actions', sortable: false },
      ],
      desserts: [],
      editedIndex: -1,
      //用户输入前区数组
      frontNumList:[],
      //用户提交后区数组
      endNumList:[],
userfrontNumList:[],
userendNumList:[],
      editedItem: {
        name: '',
        calories: 0,
        fat: 0,
        carbs: 0,
        protein: 0,
      },
      defaultItem: {
        name: '',
        calories: 0,
        fat: 0,
        carbs: 0,
        protein: 0,
      },
    //   lettoDialog
      lettoItem:{
          frontNum:'',
          endNum:'',
          ticketIssue:'',
          expendMoney:'',
          awardMoney:'',
      }
    }),

    computed: {
      formTitle () {
        return this.editedIndex === -1 ? '新增' : '修改'
      },
    },

    watch: {
      dialog (val) {
        val || this.close()
      },
      dialogDelete (val) {
        val || this.closeDelete()
      },
      
    },

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
        this.desserts = [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
          },
         
        ]
      },

      editItem (item) {
        this.editedIndex = this.desserts.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialog = true
      },
      addLetto(item){
          this.lettoDialog = true

this.lettoItem=Object.assign({}, item)
 
      },

      deleteItem (item) {
        this.editedIndex = this.desserts.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialogDelete = true
      },

      deleteItemConfirm () {
        this.desserts.splice(this.editedIndex, 1)
        this.closeDelete()
      },

      close () {
          
        this.dialog = false
        this.$nextTick(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },

      closeDelete () {
        this.dialogDelete = false
        this.$nextTick(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },

      save () {
        if (this.editedIndex > -1) {
          Object.assign(this.desserts[this.editedIndex], this.editedItem)
        } else {
          this.desserts.push(this.editedItem)
        }
        this.close()
      },
      changeBtnColor(){
          console.log()

      },
      writeNum(){
           this.userfrontNumList=[]
           this.userendNumList=[]
         
          for(var i=0;i<this.frontNumList.length;i++){
 
           this.userfrontNumList[i]=this.frontNumList[i]+1
 
        } 

        for(var j=0;j<this.endNumList.length;j++){
 
           this.userendNumList[j]=this.endNumList[j]+1
 
        } 

       this.userfrontNumList=  this.userfrontNumList.sort()
    
  this.userendNumList=  this.userendNumList.sort()
      },
//计算彩票金额
    calcPrice(){



        
    },
pushLottery(){
console.log('前区号码为：'+this.userfrontNumList)
console.log('后区号码为：'+this.userendNumList)
this.lettoDialog = false
},
  checkDetail(item){
console.log(item.id)
    this.$router.push("/dashboard/pages/dashboards/LettoDetail");

  }



    },
  }
</script>